<template>
  <div class="app-container">
    <div class="Aline1">
      <div class="Bline1">
        <el-tag type="success">数据统计</el-tag>
      </div>
      <div class="Bline2">
        <div class="Ccolumn1">
          <div class="Dcolumn1">
            <div class="Ecolumn1">
              <el-icon size="50" class="colorOrange"><Monitor /></el-icon>
              <div class="Fcolumn1">
                <el-text class="colorOrange">日用电量</el-text>
                <el-text class="colorOrange fontSize25">1000</el-text>
              </div>
            </div>
          </div>
          <div class="Dcolumn1">
            <div class="Ecolumn1">
              <el-icon size="50" class="colorOrange"><Calendar /></el-icon>
              <div class="Fcolumn1">
                <el-text class="colorOrange">月用电量</el-text>
                <el-text class="colorOrange fontSize25">1000</el-text>
              </div>
            </div>
          </div>
          <div class="Dcolumn1">
            <div class="Ecolumn1">
              <el-icon size="50" class="colorOrange"><Calendar /></el-icon>
              <div class="Fcolumn1">
                <el-text class="colorOrange">年用电量</el-text>
                <el-text class="colorOrange fontSize25">1000</el-text>
              </div>
            </div>
          </div>
        </div>
        <div class="Ccolumn2">
          <div class="Dcolumn1">
            <div class="Ecolumn1">
              <el-icon size="50" class="colorBlue"><Monitor /></el-icon>
              <div class="Fcolumn1">
                <el-text class="colorBlue">日用水量</el-text>
                <el-text class="colorBlue fontSize25">1000</el-text>
              </div>
            </div>
          </div>
          <div class="Dcolumn1">
            <div class="Ecolumn1">
              <el-icon size="50" class="colorBlue"><Calendar /></el-icon>
              <div class="Fcolumn1">
                <el-text class="colorBlue">月用水量</el-text>
                <el-text class="colorBlue fontSize25">1000</el-text>
              </div>
            </div>
          </div>
          <div class="Dcolumn1M">
            <div class="Ecolumn1">
              <el-icon size="50" class="colorBlue"><Calendar /></el-icon>
              <div class="Fcolumn1">
                <el-text class="colorBlue">年用水量</el-text>
                <el-text class="colorBlue fontSize25">1000</el-text>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="Aline2">
      <div class="Bcolumn1">
        <div class="Cline1">
          <el-tag type="success" style="margin-left: 20px; margin-top: 10px"
            >近7日用电</el-tag
          >
        </div>
        <div class="Cline2">
          <div
            ref="lineChartRef1"
            style="width: 100%; height: 110%; transform: translate(0, -5%)"
          ></div>
        </div>
      </div>
      <div class="Bcolumn2">
        <div class="Cline1">
          <el-tag type="success" style="margin-left: 20px; margin-top: 10px"
            >近7日用水</el-tag
          >
        </div>
        <div class="Cline2">
          <div
            ref="lineChartRef2"
            style="width: 100%; height: 110%; transform: translate(0, -5%)"
          ></div>
        </div>
      </div>
    </div>
    <div class="Aline3">
      <div class="Bcolumn1">
        <div class="Cline1">
          <el-tag type="success" style="margin-left: 20px; margin-top: 10px"
            >用电分析</el-tag
          >
        </div>
        <div class="Cline2">
          <div
            ref="lineChartRef3"
            style="width: 100%; height: 110%; transform: translate(0, -5%)"
          ></div>
        </div>
      </div>
      <div class="Bcolumn2">
        <div class="Cline1">
          <el-tag type="success" style="margin-left: 20px; margin-top: 10px"
            >用电分析</el-tag
          >
        </div>
        <div class="Cline2">
          <div
            ref="lineChartRef4"
            style="width: 100%; height: 110%; transform: translate(0, -5%)"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.app-container {
  .Aline1 {
    height: 12vh;
    width: 100%;
    margin-bottom: 2vh;
    display: grid;
    .Bline1 {
      height: 100%;
      width: 100%;
    }
    .Bline2 {
      display: flex;
      height: 100%;
      width: 100%;
      .Ccolumn1 {
        display: flex;
        width: 50%;
        height: 100%;
      }
      .Ccolumn2 {
        display: flex;
        height: 100%;
        width: 50%;
      }
      .Dcolumn1 {
        width: 33.3%;
        height: 100%;
        border-right-style: solid;
        border-width: 1px;
      }
      .Dcolumn1M {
        width: 33.3%;
        height: 100%;
      }
      .Ecolumn1 {
        transform: translate(50%, 15%);
        width: 50%;
        height: 100%;
        display: flex;
      }
      .Fcolumn1 {
        height: 50%;
        display: grid;
      }

      .colorOrange {
        margin-left: 5px;
        color: orange;
      }
      .colorBlue {
        margin-left: 5px;
        color: blue;
      }
      .fontSize25 {
        font-size: 25px;
      }
    }
  }
  .Aline2 {
    height: 35vh;
    width: 100%;
    display: flex;
    .Bcolumn1 {
      border-top-style: solid;
      border-right-style: solid;
      border-width: 1px;
      height: 100%;
      width: 50%;
    }
    .Bcolumn2 {
      border-top-style: solid;
      border-width: 1px;
      height: 100%;
      width: 50%;
    }
    .Cline1 {
      height: 10%;
      width: 100%;
    }
    .Cline2 {
      width: 100%;
      height: 90%;
    }
  }
  .Aline3 {
    height: 35vh;
    width: 100%;
    display: flex;
    .Bcolumn1 {
      border-top-style: solid;
      border-right-style: solid;
      border-width: 1px;
      height: 100%;
      width: 50%;
    }
    .Bcolumn2 {
      border-top-style: solid;
      border-width: 1px;
      height: 100%;
      width: 50%;
    }
    .Cline1 {
      height: 10%;
      width: 100%;
    }
    .Cline2 {
      width: 100%;
      height: 90%;
    }
  }
}
</style>
<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";
onMounted(() => {
  let xName = [];
  for (let i = 1; i <= 7; i++) {
    xName.push("9-" + i);
  }
  let yData = [1, 6, 7, 2, 5, 4, 3];
  createlineChart1(xName, yData);
});
const lineChartRef1 = ref(null);
function createlineChart1(xName, yData) {
  // 在 DOM 挂载后初始化 ECharts
  const chart = echarts.init(lineChartRef1.value);

  // 设置图表的配置项和数据
  const option = {
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      axisTick: {
        alignWithLabel: true,
      },
      axisLine: {
        onZero: false,
        lineStyle: {
          color: "#000000FF",
          width: "3",
        },
      },
      type: "category",
      data: xName,
    },
    yAxis: {
      type: "value",
      name: "单位（kw/h）",
      nameTextStyle: {
        color: "#aaa",
        nameLocation: "start",
      },
      axisTick: {
        alignWithLabel: true,
      },
      axisLine: {
        onZero: false,
        lineStyle: {
          color: "#000000",
          width: "3",
        },
      },
      splitLine: {
        show: true, // 是否显示分隔线。默认数值轴显示，类目轴不显示
        lineStyle: {
          color: ["#000000"], // 分隔线颜色。
          width: 1, // 分隔线线宽
          type: "dashed", // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
          opacity: 0.3, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
        },
      },
    },
    series: [
      {
        name: "电量",
        type: "line",
        data: yData,
        symbol: "circle", // 设置点形状为圆形
        symbolSize: 15, // 设置点大小为8
        lineStyle: {
          normal: {
            color: "#FFBB00FF",
            width: 4,
            type: "line",
          },
        },
        itemStyle: {
          color: "#FFBB00FF",
          borderColor: "#EEF2F7",
          borderWidth: 3,
        },
      },
    ],
  };

  // 使用配置项和数据显示图表
  chart.setOption(option);
}

onMounted(() => {
  let xName = [];
  for (let i = 1; i <= 7; i++) {
    xName.push("9-" + i);
  }
  let yData = [1, 6, 7, 2, 5, 4, 3];
  createlineChart2(xName, yData);
});
const lineChartRef2 = ref(null);
function createlineChart2(xName, yData) {
  // 在 DOM 挂载后初始化 ECharts
  const chart = echarts.init(lineChartRef2.value);

  // 设置图表的配置项和数据
  const option = {
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      axisTick: {
        alignWithLabel: true,
      },
      axisLine: {
        onZero: false,
        lineStyle: {
          color: "#000000FF",
          width: "3",
        },
      },
      type: "category",
      data: xName,
    },
    yAxis: {
      type: "value",
      name: "单位（m³）",
      nameTextStyle: {
        color: "#aaa",
        nameLocation: "start",
      },
      axisTick: {
        alignWithLabel: true,
      },
      axisLine: {
        onZero: false,
        lineStyle: {
          color: "#000000FF",
          width: "3",
        },
      },
      splitLine: {
        show: true, // 是否显示分隔线。默认数值轴显示，类目轴不显示
        lineStyle: {
          color: ["#000000FF"], // 分隔线颜色。
          width: 1, // 分隔线线宽
          type: "dashed", // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
          opacity: 0.3, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
        },
      },
    },
    series: [
      {
        name: "水量",
        type: "line",
        data: yData,
        symbol: "circle", // 设置点形状为圆形
        symbolSize: 15, // 设置点大小为8
        lineStyle: {
          normal: {
            color: "#1663A8",
            width: 4,
            type: "line",
          },
        },
        itemStyle: {
          color: "#1663A8",
          borderColor: "#EEF2F7",
          borderWidth: 3,
        },
      },
    ],
  };

  // 使用配置项和数据显示图表
  chart.setOption(option);
}

onMounted(() => {
  let xName = [];
  for (let i = 1; i <= 12; i++) {
    xName.push(i + "月");
  }
  let yData1 = [1, 6, 7, 2, 5, 4, 3];
  let yData2 = [6, 1, 3, 4, 7, 5, 2];
  createlineChart3(xName, yData1, yData2);
});

const lineChartRef3 = ref(null);
function createlineChart3(xName, yData1, yData2) {
  // 在 DOM 挂载后初始化 ECharts
  const chart = echarts.init(lineChartRef3.value);

  // 设置图表的配置项和数据
  const option = {
    legend: {},
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      axisTick: {
        alignWithLabel: true,
      },
      axisLine: {
        onZero: false,
        lineStyle: {
          color: "#000000FF",
          width: "3",
        },
      },
      type: "category",
      data: xName,
    },
    yAxis: {
      type: "value",
      name: "单位（kw/h）",
      nameTextStyle: {
        color: "#aaa",
        nameLocation: "start",
      },
      axisTick: {
        alignWithLabel: true,
      },
      axisLine: {
        onZero: false,
        lineStyle: {
          color: "#000000",
          width: "3",
        },
      },
      splitLine: {
        show: true, // 是否显示分隔线。默认数值轴显示，类目轴不显示
        lineStyle: {
          color: ["#000000"], // 分隔线颜色。
          width: 1, // 分隔线线宽
          type: "dashed", // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
          opacity: 0.3, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
        },
      },
    },
    series: [
      {
        name: "去年",
        type: "line",
        data: yData1,
        symbol: "circle", // 设置点形状为圆形
        symbolSize: 15, // 设置点大小为8
        lineStyle: {
          normal: {
            color: "#E87D0BFF",
            width: 4,
            type: "line",
          },
        },
        itemStyle: {
          color: "#E87D0BFF",
          borderColor: "#EEF2F7",
          borderWidth: 3,
        },
      },
      {
        name: "今年",
        type: "line",
        data: yData2,
        symbol: "circle", // 设置点形状为圆形
        symbolSize: 15, // 设置点大小为8
        lineStyle: {
          normal: {
            color: "#FFBB00FF",
            width: 4,
            type: "line",
          },
        },
        itemStyle: {
          color: "#FFBB00FF",
          borderColor: "#EEF2F7",
          borderWidth: 3,
        },
      },
    ],
  };

  // 使用配置项和数据显示图表
  chart.setOption(option);
}

onMounted(() => {
  let xName = [];
  for (let i = 1; i <= 12; i++) {
    xName.push(i + "月");
  }
  let yData1 = [1, 6, 7, 2, 5, 4, 3];
  let yData2 = [6, 1, 3, 4, 7, 5, 2];
  createlineChart4(xName, yData1, yData2);
});
const lineChartRef4 = ref(null);
function createlineChart4(xName, yData1, yData2) {
  // 在 DOM 挂载后初始化 ECharts
  const chart = echarts.init(lineChartRef4.value);

  // 设置图表的配置项和数据
  const option = {
    legend: {},
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      axisTick: {
        alignWithLabel: true,
      },
      axisLine: {
        onZero: false,
        lineStyle: {
          color: "#000000FF",
          width: "3",
        },
      },
      type: "category",
      data: xName,
    },
    yAxis: {
      name: "单位（m³）",
      nameTextStyle: {
        color: "#aaa",
        nameLocation: "start",
      },
      axisTick: {
        alignWithLabel: true,
      },
      axisLine: {
        onZero: false,
        lineStyle: {
          color: "#000000FF",
          width: "3",
        },
      },
      splitLine: {
        show: true, // 是否显示分隔线。默认数值轴显示，类目轴不显示
        lineStyle: {
          color: ["#000000FF"], // 分隔线颜色。
          width: 1, // 分隔线线宽
          type: "dashed", // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
          opacity: 0.3, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
        },
      },
    },
    series: [
      {
        name: "去年",
        type: "line",
        data: yData1,
        symbol: "circle", // 设置点形状为圆形
        symbolSize: 15, // 设置点大小为8
        lineStyle: {
          normal: {
            color: "#19C8C8FF",
            width: 4,
            type: "line",
          },
        },
        itemStyle: {
          color: "#19C8C8FF",
          borderColor: "#EEF2F7",
          borderWidth: 3,
        },
      },
      {
        name: "今年",
        type: "line",
        data: yData2,
        symbol: "circle", // 设置点形状为圆形
        symbolSize: 15, // 设置点大小为8
        lineStyle: {
          normal: {
            color: "#1663A8",
            width: 4,
            type: "line",
          },
        },
        itemStyle: {
          color: "#1663A8",
          borderColor: "#EEF2F7",
          borderWidth: 3,
        },
      },
    ],
  };

  // 使用配置项和数据显示图表
  chart.setOption(option);
}
</script>
